import { setMarkerStyle } from './index'
function setAnimateStyle({ size = 40, map, src }) {
  let canvas = document.createElement('canvas')
  canvas.width = size
  canvas.height = size
  /* 设置半径 10 */
  let radius = size / 4
  /* 绘制 */
  let ctx = canvas.getContext('2d')
  let increase = true
  /* 10~14
    <10  true radius++;
    >14  false radius--;
     */
  function frame() {
    /* 清空画布 */
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    /* 执行绘制 */
    ctx.beginPath()
    ctx.arc(size / 2, size / 2, radius, 0, Math.PI * 2)
    ctx.closePath()
    ctx.fillStyle = '#ff2d51'
    ctx.fill()
    /* 设置一个蓝色的静态点 */
    ctx.beginPath()
    ctx.arc(size / 2, size / 2, size / 4 - 1, 0, Math.PI * 2)
    ctx.closePath()
    ctx.fillStyle = '#416EFF'
    ctx.fill()
    if (radius < size / 4) {
      increase = true
    } else if (radius > size / 4 + 4) {
      increase = false
    }
    if (increase) {
      radius++
    } else {
      radius--
    }
    setTimeout(frame, 150)
    map.render()
  }
  frame()
  const style = setMarkerStyle(src)
  return style
}
export default setAnimateStyle
